<!--ules
 * @Author: lsy
 * @Date: 2023-02-14 22:35:38
 * @LastEditors: lsy
 * @LastEditTime: 2023-02-16 19:43:37
 * @Description: 请填写简介
-->
<template>
	<div>
		<div class="add-btn">
			<div>添加套餐课程:</div>
			<div><el-button type="primary" @click="addCourse">添加课程</el-button></div>
		</div>
		<div class="goods">
			<div class="goods-tag">
				<div class="item" v-for="(item, index) in isSelectCourse" :key="index">
					<div>{{ item.courseName }}</div>
					<div class="icon" @click="removeCourse(item, index)">
						<el-icon>
							<Close />
						</el-icon>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div>
		<!-- 第一期因没有管理工具的页面功能，先以手动添加的形式 -->
		<!-- <div  class="add-btn">
      <div>添加工具:</div>
      <div><el-button type="primary" @click="addGoods">添加工具</el-button></div>
    </div>
    <div class="goods" >
      <div class="p-tb-10">付费工具:</div>
      <div class="goods-tag">
        <div class="item" v-for="(item, index) in isPayGoods" :key="index">
          <div>{{ item.name }}</div>
          <div class="icon" @click="removeCheckout(item)">
            <el-icon><Close /></el-icon>
          </div>
        </div>
      </div>
      <div  class="p-tb-10">赠送工具:</div>
      <div class="goods-tag">
        <div class="item" v-for="(item, index) in isGiveGoods" :key="index">
          <div>{{ item.name }}</div>
          <div class="icon" @click="removeCheckout(item)">
            <el-icon><Close /></el-icon>
          </div>
        </div>
      </div>
    </div> -->
		<div class="add-btn">
			<div>付费工具:</div>
			<div class="tool-list">
				<div class="item p-flex p-ai-c m-b-10" v-for="(item, index) in isPayToolList" :key="index">
					<div style="width: 300px;">
						<el-input placeholder="请输入工具名称" v-model="item.name"></el-input>
					</div>
					<div class="m-l-10" style="width: 110px;">
						<el-input placeholder="请输入价格" v-model="item.cost"></el-input>
					</div>
					<div class="m-l-10">
						<el-button type="primary" plain :icon="Plus"
							@click="changeTool('Plus', index, isPayToolList)" />
						<el-button type="danger" plain :icon="Minus"
							@click="changeTool('Minus', index, isPayToolList)" />
					</div>
				</div>
				<el-button type="primary" plain :icon="Plus" @click="changeTool('Plus', -1, isPayToolList)"
					v-if="isPayToolList.length === 0" />
			</div>
		</div>
		<div class="add-btn">
			<div>赠送工具:</div>
			<div class="tool-list">
				<div class="item p-flex p-ai-c m-b-10" v-for="(item, index) in isGiveToolList" :key="index">
					<div style="width: 300px;">
						<el-input placeholder="请输入工具名称" v-model="item.name"></el-input>
					</div>
					<div class="m-l-10" style="width: 110px;">
						<el-input placeholder="请输入价格" v-model="item.cost"></el-input>
					</div>
					<div class="m-l-10">
						<el-button type="primary" plain :icon="Plus"
							@click="changeTool('Plus', index, isGiveToolList)" />
						<el-button type="danger" plain :icon="Minus"
							@click="changeTool('Minus', index, isGiveToolList)" />
					</div>
				</div>
				<el-button type="primary" plain :icon="Plus" @click="changeTool('Plus', -1, isGiveToolList)"
					v-if="isGiveToolList.length === 0" />
			</div>
		</div>
	</div>
	<sc-basic-form :formItems="studentFormItems" :model="studentModel" label-width="140" ref="formRef">
	</sc-basic-form>

	<SelectGoods ref="selectGoodsRef" @comfirm="comfirm" :tableType=1 />
	<SelectCourse ref="selectCourseRef" @comfirm="courserComfirm" />
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		defineProps,
		defineEmits,
		defineExpose
	} from "vue";
	import {
		studentFormItems
	} from "./data";
	import SelectGoods from './../../components/selectGoods.vue'
	import SelectCourse from './../../components/selectCourse.vue'
	import {
		Close,
		Minus,
		Plus
	} from '@element-plus/icons-vue'

	const props = defineProps({
		studentInfo: {
			type: Object,
			default: () => ({})
		}
	})

	const emits = defineEmits(['update:studentInfo'])
	const studentModel = computed({
		get() {
			return props.studentInfo
		},
		set(val) {
			emits('update:studentInfo', val)
		}
	})


	const formRef = ref(null)

	const selectGoodsRef = ref(null)

	const isSelectGoods = ref([])

	function comfirm(arr) {
		isSelectGoods.value = JSON.parse(JSON.stringify(arr))
	}

	const isSelectCourse = ref([])

	function courserComfirm(arr) {
		isSelectCourse.value = JSON.parse(JSON.stringify(arr))
	}

	const removeCourse = (item, index) => {
		isSelectCourse.value.splice(index, 1)
	}

	function validate(callBackObj) {
		formRef.value.validate(callBackObj)
	}

	const selectCourseRef = ref(null)

	// 打开添加课程弹窗
	function addCourse() {
		const arr = JSON.parse(JSON.stringify(isSelectCourse.value))
		selectCourseRef.value.openDialog(arr)
	}

	const isPayToolList = reactive([])
	const isGiveToolList = reactive([])

	// 添加、移除工具
	function changeTool(type, index, arrName) {
		if (type === 'Plus') {
			if (index === -1) {
				arrName.push({
					name: "",
					cost: ""
				})
			} else {
				arrName.splice(index + 1, 0, {
					name: "",
					cost: ""
				})
			}
		} else {
			arrName.splice(index, 1)
		}
	}
	defineExpose({
		validate
	})
</script>

<style lang="scss" scoped>
	.mr10 {
		margin-right: 10px;
	}

	.add-btn {
		display: flex;
		// align-items: center;
		padding-bottom: 15px;

		&>div:nth-child(1) {
			width: 140px;
			font-size: 14px;
			color: #606266;
			text-align: end;
			padding-right: 12px;
			height: 32px;
			line-height: 32px;
		}
	}

	.goods {
		font-size: 14px;
		color: #606266;
		padding-left: 140px;

		.goods-tag {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 10px;

			.item {
				display: flex;
				align-items: center;
				height: 28px;
				line-height: 26px;
				border: 1px solid #1a76d3;
				padding-left: 5px;
				color: #3681d6;
				margin: 5px 5px 5px 0;

				.icon {
					cursor: pointer;
					margin-left: 3px;
					width: 25px;
					height: 26px;
					font-size: 15px;
					text-align: center;
					line-height: 30px;

					&:hover {
						background-color: #ff4a3f;
						color: #fff;
					}
				}
			}
		}
	}
</style>